// 移除未使用的导入
import React, { useState } from 'react';
import {
  Layout,
  Card,
  Button,
  List,
  Input,
  Modal,
  Form,
  Tabs,
  Space,
  Typography,
  Row,
  Col,
  Statistic,
  Avatar,
  Divider,
  Badge,
  Radio,
  Checkbox,
} from 'antd';
import {
  VideoCameraOutlined,
  UserOutlined,
  MessageOutlined,
  LikeOutlined,
  ShareAltOutlined,
  PlayCircleOutlined,
  // 移除未使用的图标
  // PlusOutlined,
  // BarChartOutlined,
  TeamOutlined,
  ClockCircleOutlined,
} from '@ant-design/icons';

const { Content } = Layout;
const { Title, Text } = Typography; // 移除未使用的 Paragraph
const { TabPane } = Tabs;

export default function Live() {
  // 状态管理
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [activeTab, setActiveTab] = useState('1');
  const [form] = Form.useForm();

  // 模拟直播列表数据
  const liveRooms = [
    {
      id: 1,
      title: '产品设计讨论会',
      host: '张三',
      viewers: 128,
      status: 'live',
      cover: 'https://via.placeholder.com/300x180?text=直播封面1',
    },
    {
      id: 2,
      title: '前端开发技术分享',
      host: '李四',
      viewers: 56,
      status: 'live',
      cover: 'https://via.placeholder.com/300x180?text=直播封面2',
    },
    {
      id: 3,
      title: '项目进度汇报',
      host: '王五',
      viewers: 89,
      status: 'upcoming',
      scheduledTime: '2023-06-15 15:00',
      cover: 'https://via.placeholder.com/300x180?text=直播封面3',
    },
    {
      id: 4,
      title: '用户体验设计分享',
      host: '赵六',
      viewers: 0,
      status: 'ended',
      recordUrl: 'https://example.com/record/4',
      cover: 'https://via.placeholder.com/300x180?text=直播封面4',
    },
  ];

  // 模拟互动消息
  const chatMessages = [
    { id: 1, user: '用户A', content: '这个功能很实用！', time: '14:30' },
    { id: 2, user: '用户B', content: '请问如何实现这个效果？', time: '14:32' },
    {
      id: 3,
      user: '主持人',
      content: '大家可以在控制台查看代码',
      time: '14:33',
      isHost: true,
    },
  ];

  // 创建直播房间
  // 将参数名前加下划线，表示这是一个有意未使用的参数
  const handleCreateLive = _values => {
    // console.log('创建直播房间:', _values);
    setIsModalVisible(false);
    form.resetFields();
  };

  // 渲染直播列表项
  const renderLiveItem = item => (
    <List.Item>
      <Card
        hoverable
        cover={<img alt={item.title} src={item.cover} />}
        actions={[
          <Space>
            <UserOutlined /> {item.viewers}
          </Space>,
          <MessageOutlined />,
          <ShareAltOutlined />,
        ]}
      >
        <Badge
          status={
            item.status === 'live'
              ? 'processing'
              : item.status === 'upcoming'
                ? 'warning'
                : 'default'
          }
          text={
            item.status === 'live'
              ? '直播中'
              : item.status === 'upcoming'
                ? '即将开始'
                : '已结束'
          }
          style={{ position: 'absolute', top: 10, right: 10 }}
        />
        <Card.Meta
          avatar={<Avatar icon={<UserOutlined />} />}
          title={item.title}
          description={`主持人: ${item.host}`}
        />
        {item.status === 'upcoming' && (
          <div style={{ marginTop: 10 }}>
            <ClockCircleOutlined /> 预计开始: {item.scheduledTime}
          </div>
        )}
        {item.status === 'ended' && (
          <Button
            type='link'
            icon={<PlayCircleOutlined />}
            style={{ padding: 0, marginTop: 10 }}
          >
            查看回放
          </Button>
        )}
      </Card>
    </List.Item>
  );

  return (
    <Layout style={{ padding: '20px', background: '#fff' }}>
      <Content>
        <div
          style={{
            display: 'flex',
            justifyContent: 'space-between',
            marginBottom: 20,
          }}
        >
          <Title level={3}>直播中心</Title>
          <Button
            type='primary'
            icon={<VideoCameraOutlined />}
            onClick={() => setIsModalVisible(true)}
          >
            创建直播
          </Button>
        </div>

        <Tabs activeKey={activeTab} onChange={setActiveTab}>
          <TabPane tab='直播列表' key='1'>
            <List
              grid={{ gutter: 16, xs: 1, sm: 2, md: 3, lg: 3, xl: 4, xxl: 4 }}
              dataSource={liveRooms}
              renderItem={renderLiveItem}
            />
          </TabPane>

          <TabPane tab='我的直播' key='2'>
            <Row gutter={[16, 16]}>
              <Col span={16}>
                <Card title='当前直播' bordered={false}>
                  <div
                    style={{
                      background: '#000',
                      height: 400,
                      display: 'flex',
                      justifyContent: 'center',
                      alignItems: 'center',
                    }}
                  >
                    <VideoCameraOutlined
                      style={{ fontSize: 64, color: '#555' }}
                    />
                  </div>
                  <div style={{ padding: '16px 0' }}>
                    <Title level={4}>产品设计讨论会</Title>
                    <Space split={<Divider type='vertical' />}>
                      <Text>主持人: 张三</Text>
                      <Text>
                        <UserOutlined /> 128 人观看
                      </Text>
                      <Text>已直播 01:23:45</Text>
                    </Space>
                  </div>
                  <Space>
                    <Button type='primary'>开始直播</Button>
                    <Button>结束直播</Button>
                    <Button icon={<ShareAltOutlined />}>分享</Button>
                  </Space>
                </Card>
              </Col>

              <Col span={8}>
                <Card title='互动区' style={{ height: '100%' }}>
                  <div style={{ height: 300, overflowY: 'auto' }}>
                    {chatMessages.map(msg => (
                      <div key={msg.id} style={{ marginBottom: 10 }}>
                        <Text
                          strong={msg.isHost}
                          type={msg.isHost ? 'danger' : undefined}
                        >
                          {msg.user}:
                        </Text>
                        <Text> {msg.content}</Text>
                        <div>
                          <Text type='secondary' style={{ fontSize: 12 }}>
                            {msg.time}
                          </Text>
                        </div>
                      </div>
                    ))}
                  </div>
                  <Divider style={{ margin: '12px 0' }} />
                  <Input.Group compact>
                    <Input
                      style={{ width: 'calc(100% - 70px)' }}
                      placeholder='发送消息...'
                    />
                    <Button type='primary'>发送</Button>
                  </Input.Group>
                </Card>
              </Col>
            </Row>

            <Card title='数据看板' style={{ marginTop: 16 }}>
              <Row gutter={16}>
                <Col span={6}>
                  <Statistic
                    title='当前观看人数'
                    value={128}
                    prefix={<TeamOutlined />}
                  />
                </Col>
                <Col span={6}>
                  <Statistic
                    title='累计观看人数'
                    value={256}
                    prefix={<UserOutlined />}
                  />
                </Col>
                <Col span={6}>
                  <Statistic
                    title='互动消息数'
                    value={45}
                    prefix={<MessageOutlined />}
                  />
                </Col>
                <Col span={6}>
                  <Statistic
                    title='点赞数'
                    value={89}
                    prefix={<LikeOutlined />}
                  />
                </Col>
              </Row>
            </Card>
          </TabPane>

          <TabPane tab='直播回放' key='3'>
            <List
              itemLayout='vertical'
              dataSource={liveRooms.filter(item => item.status === 'ended')}
              renderItem={item => (
                <List.Item
                  actions={[
                    <Space>
                      <UserOutlined /> {item.viewers} 次观看
                    </Space>,
                    <Space>
                      <MessageOutlined /> 32 条评论
                    </Space>,
                    <Space>
                      <LikeOutlined /> 24 次点赞
                    </Space>,
                  ]}
                  extra={
                    <div
                      style={{
                        width: 240,
                        height: 135,
                        background: '#eee',
                        display: 'flex',
                        justifyContent: 'center',
                        alignItems: 'center',
                      }}
                    >
                      <PlayCircleOutlined
                        style={{ fontSize: 48, color: '#555' }}
                      />
                    </div>
                  }
                >
                  <List.Item.Meta
                    avatar={<Avatar icon={<UserOutlined />} />}
                    title={item.title}
                    description={`主持人: ${item.host} | 录制于 2023-06-10`}
                  />
                </List.Item>
              )}
            />
          </TabPane>
        </Tabs>

        {/* 创建直播弹窗 */}
        <Modal
          title='创建直播'
          open={isModalVisible}
          onCancel={() => setIsModalVisible(false)}
          onOk={() => form.submit()}
        >
          <Form form={form} layout='vertical' onFinish={handleCreateLive}>
            <Form.Item
              name='title'
              label='直播标题'
              rules={[{ required: true, message: '请输入直播标题' }]}
            >
              <Input placeholder='请输入直播标题' />
            </Form.Item>

            <Form.Item name='description' label='直播简介'>
              <Input.TextArea rows={4} placeholder='请输入直播简介' />
            </Form.Item>

            <Form.Item name='coverType' label='封面设置'>
              <Radio.Group>
                <Radio value='default'>默认封面</Radio>
                <Radio value='upload'>上传封面</Radio>
              </Radio.Group>
            </Form.Item>

            <Form.Item name='startNow' valuePropName='checked'>
              <Checkbox>立即开始直播</Checkbox>
            </Form.Item>
          </Form>
        </Modal>
      </Content>
    </Layout>
  );
export default function Live() {
  return <div>Live</div>;
}